<template>
  <div class="detail" v-if="detail">
    <!-- 主图轮播 -->
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="photo in detail.photo" :key="photo.id">
        <img v-lazy="photo.url" style="width: 100%;" />
      </van-swipe-item>
    </van-swipe>
    <!-- 标题价格等 -->
    <h3>{{ detail.title }}</h3>
    <div>折后价：{{ detail.price }}</div>
    <!-- 图文详情 -->
    <van-divider>商品图文详情</van-divider>
    <img
      v-for="desc in detail.descContentList"
      :key="desc.id"
      :src="desc.url"
      alt=""
      style="width: 100%; display: block;"
    >
    <van-goods-action>
      <van-goods-action-icon icon="chat-o" text="客服" dot />
      <van-goods-action-icon icon="cart-o" text="购物车" :badge="total" @click="$router.push('/cart')"/>
      <van-goods-action-icon icon="shop-o" text="店铺" badge="12" />
      <van-goods-action-button type="warning" text="加入购物车" @click="handleAddToCart" />
      <van-goods-action-button type="danger" text="立即购买"  @click="$router.push('/confirm')"/>
    </van-goods-action>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getDetail } from '@/api/product'
import { Toast } from 'vant'
export default {
  name: 'Detail',
  data() {
    return {
      detail: null,
    }
  },
  computed: {
    ...mapGetters('cart', ['total']),
  },
  async created() {
    const id = this.$route.params.id
    try {
      const data = await getDetail(id)
      // console.log('商品详情', data)
      this.detail = data.detail
    } catch (error) {
      console.error(error)
    }
  },
  methods: {
    handleAddToCart() {
      const { id, title, image, price } = this.detail
      const currentProduct = {
        id,
        title,
        image,
        price,
        amount: 1,
      }
      this.$store.commit('cart/addToCart', currentProduct)
      Toast.success({
        message: '加入购物车',
        duration: 300,
      })
    },
  },
}
</script>

<style lang="less" scoped>
.detail {
    padding-bottom: 60px;
  }
</style>
